<style  lang="less" scoped>
/deep/ .yaokongPersonDialog{
  background: rgba(2, 22, 42, .9);
  // max-height: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    display: flex;
    align-items: center;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
      flex:1;
      overflow: hidden;
      margin-right: 40px;
      font-size: 16px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 10px;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 操作人弹框样式
    .operatorPwd{
      & > div + div{
        margin-top: 10px;
      }
      & > div{
        display: flex;
        align-items: center;
        & > label{
          font-size: 14px;
          width: 120px;
          color: #dee2e5;
        }
        .el-input,.el-select{
          flex:1;
          overflow: hidden;
        }
      }
    }

    // 消息告警输入框
    .messageAlarmList{
      flex:1;
      overflow: hidden;
      .el-table{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background:transparent;
        &:before{
          height: 0;
        }
        .el-table__header-wrapper{
          overflow: initial;
        }
        .el-table__body-wrapper{
          flex:1;
          overflow: auto;
        }
      }
      .el-table th{
        background:#142e48;
      }
      .el-table tr{
        background: transparent;
      }
      .el-table td, .el-table th{
        border: 1px solid #313338;
        border-left: 0;
        border-right: 0;
        color: #dee2e5;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #3a6378;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}
.Page1{
  width: 100%;
  height: 100%;
  color:#fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  .headerBox{
    width: 100%;
    border-bottom: 2px solid #fff;
    position: relative;
    & > h1{
      font-size: 1.8rem;
      font-family: '宋体';
      font-weight: bold;
      text-align: center;
    }
    .headerRightBtnGroup{
      display: flex;
      align-items: center;
      align-self: flex-end;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translate(0, -50%);
    }
    .headerLeftBtnGroup{
      display: flex;
      align-items: center;
      align-self: flex-end;
      position: absolute;
      top: 50%;
      left: 1%;
      transform: translate(0, -50%);
      .block{
        margin-left: 2rem;
      }
    }
  }
  .wrapper{
    flex:1;
    overflow: auto;
    padding: 0 0px;
    box-sizing: border-box;
    .ctn{
      min-width: 99%;
      height: 99%;
      #svgDom{
        width: 100%;
        height: 100%;
      }
    }
  }
}
/deep/ .el-form-item__label {
  color: #fff; /* 自定义 label 的颜色 */
}

/* 调整 el-input 的 placeholder 颜色 */
/deep/ .el-input__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
  opacity: 1;
}

/* 调整 el-select 的 placeholder 颜色 */
/deep/ .el-select .el-input__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
}
/deep/ .el-textarea__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
  opacity: 1; /* 确保颜色生效 */
}

// 遥控弹框样式
/deep/ .yaokongDialog, /deep/ .operateRecordDialog{
  background: rgba(2, 22, 42, 1);
  max-height: 70%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 10px;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 操作人弹框样式
    .operatorPwd{
      & > div + div{
        margin-top: 10px;
      }
      & > div{
        display: flex;
        align-items: center;
        & > label{
          font-size: 14px;
          width: 80px;
        }
        .el-input{
          flex:1;
          overflow: hidden;
        }
      }
    }

    // 消息告警输入框
    .messageAlarmList{
      flex:1;
      overflow: auto;
      .el-table{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background:transparent;
        &:before{
          height: 0;
        }
        .el-table__header-wrapper{
          overflow: initial;
        }
        .el-table__body-wrapper{
          flex:1;
          overflow: auto;
        }
      }
      .el-table th{
        background:#142e48;
      }
      .el-table tr{
        background: transparent;
      }
      .el-table td, .el-table th{
        border: 1px solid #313338;
        border-left: 0;
        border-right: 0;
        color: #dee2e5;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #3a6378;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}


// 汇报调度弹框样式
/deep/ .reportSchedulingDialog{
  background: rgba(2, 22, 42, 1);
  max-height: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 0;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 汇报调度输入框
    .reportSchedulingTextArea{
      flex:1;
      overflow: hidden;
      // .el-textarea{
      // 	height: 100%;
      // }
      .el-textarea__inner{
        height: 100%;
        color:#dee2e5;
        background:transparent;
        border: 1px solid #666;
        font-size: 16px;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    text-align: center;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}
/deep/ .operateRecordDialog {
  pointer-events: auto;
  margin-right: 34%;
}
.is-highlight {
  animation: highlight 1s;
}
@keyframes highlight {
  0% {
    color: yellow;
  }
  100% {
    color: #FFFFFF;
  }
}
.brandBtn{
  animation: flash 1s infinite;
}
@keyframes flash {
  0%, 100% {
    opacity: 1; /* 完全不透明 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}
.brandMsgTitle{
  font-size: 2rem;
  color: white;
}
.brandMsgP{
  font-size: 1.5rem;
  //空两个字
  margin: 2rem;
}
/deep/ .el-dialog__body{
  overflow: scroll;
}
.fault-dialog-content {
  padding: 20px;
  color: #fff;
}

/* 覆盖 Element UI 的默认样式 */
:deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.6);
}


:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-collapse-item__header) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-collapse-item__content) {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-checkbox__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-radio__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-input-number__decrease:hover),
:deep(.el-input-number__increase:hover) {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-input__inner) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
:deep(.is-disabled .el-input__inner){
  background-color: #131f2a;
  border-color: rgba(255, 255, 255, 0.2);
  color: #999;
}
:deep(.el-input__inner:hover),
:deep(.el-input__inner:focus) {
  border-color: #409EFF;
}

:deep(.el-select-dropdown__item) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-select-dropdown__item.hover) {
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-select-dropdown__item.selected) {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-slider__runway) {
  background-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-slider__bar) {
  background-color: #409EFF;
}

:deep(.el-slider__button) {
  border-color: #409EFF;
  background-color: #409EFF;
}

:deep(.el-collapse) {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: transparent;
}

.distance-slider {
  width: 300px;
}

.ms-label {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.8);
}

.el-collapse {
  margin: 10px 0;
  border-color: rgba(255, 255, 255, 0.1);
}

/* 修复下拉菜单的背景色 */
:deep(.el-select-dropdown) {
  background-color: rgb(2, 22, 42);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 修复弹出层的背景色 */
:deep(.el-popper[x-placement^="bottom"]) {
  background-color: rgb(2, 22, 42);
}

/* 修改折叠面板的样式 */
:deep(.el-collapse) {
  border: none;
  background-color: transparent;
}

:deep(.el-collapse-item) {
  margin-bottom: 1px;
}

:deep(.el-collapse-item__header) {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
}

:deep(.el-collapse-item__header:hover) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-collapse-item__content) {
  background-color: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 15px;
}

:deep(.el-collapse-item__arrow) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-collapse-item__header.is-active) {
  border-bottom-color: transparent;
}

:deep(.el-collapse-item__wrap) {
  border: none;
  background-color: transparent;
}

/* 添加新的样式 */
.fault-list {
  margin-top: 20px;
}

:deep(.el-table) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgb(28, 46, 64);
}

:deep(.el-table::before) {
  display: none;
}

:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-bottom: 1px solid rgb(28, 46, 64);
}

:deep(.el-table--border th),
:deep(.el-table--border td) {
  border-right: 1px solid rgb(28, 46, 64);
}

:deep(.el-table thead) {
  border-bottom: 1px solid rgb(28, 46, 64);
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(2, 22, 42) !important;
}

.cancel-fault-buttons {
  display: flex;
  gap: 10px;
}

:deep(.el-textarea__inner) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

:deep(.el-textarea__inner:focus) {
  border-color: #409EFF;
}

:deep(.el-table__empty-block) {
  background-color: transparent;
}

:deep(.el-table__empty-text) {
  color: rgba(255, 255, 255, 0.6);
}
.messageAlarmList {
  overflow: hidden;  /* 隐藏溢出内容 */
}
.messageAlarmList {
  scrollbar-width: none; /* 隐藏滚动条 */
}
.messageAlarmList::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.Page1:active {
  cursor: grabbing;
}
</style>
<template xmlns="">
    <div class="Page1" @contextmenu.r.prevent  @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu">
        <div class="headerBox">
            <div class="headerLeftBtnGroup">
                <div class="block">
                    <el-cascader
                            v-model="jiaoAnValue"
                            :options="jiaoAnOptions_1"
                            placeholder="教案"
                            style="width: 7rem;"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"
                    ></el-cascader>
                </div>
                <div class="block">
                    <el-cascader
                            v-model="gongkuangValue"
                            placeholder="工况"
                            style="width: 7rem"
                            :options="gongKuangOptions"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"></el-cascader>
                </div>
            </div>
            <h1 style="color: #fff;margin-left: -10%">通信拓扑图</h1>
            <div class="headerRightBtnGroup">
                <el-button @click="goPage('/mainPage')">系统主电气图</el-button>
                <el-button @click="goPage('/quxian')">电流实时曲线</el-button>
                <el-button @click="goPage('/gzp')">报警光字牌</el-button>
                <el-button @click="goPage('/yb')">综保软压板</el-button>
                <el-button @click="goPage('/tuopu')">通信拓扑图</el-button>
                <el-button @click="operationRecords">操作记录</el-button>
            </div>
        </div>
        <div class="wrapper" ref="page" @mousedown="startDrag">
            <div class="ctn">
                <img
                        src="@/assets/imgs/img.png"
                        alt=""
                        style="
        position: fixed;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80vw;
        height: 80vh;
        max-width: 90%;
        max-height: 90vh;
        z-index: 9999;
        object-fit: contain;
        transition: all 0.3s ease;

      "
                >
            </div>
        </div>
        <el-dialog title="教案初始化" :visible.sync="newJiaoAnDialog" width="40rem" 	custom-class="switchPatrolDialog" :close-on-press-escape="true"
                   :close-on-click-modal="true" 	@close="closeJiaoAn">
            <el-form :model="form">
                <el-form-item label="教案名称" label-width="8rem">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工况文件" label-width="8rem">
                    <el-select v-model="form.region" placeholder="请选择工况文件">
                        <el-option  v-for="(item,index) in form.gKList" :key="index" :label=item.name :value=item.id></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教案描述" label-width="8rem">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.desc">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="newJiaoAn">教案入库</el-button>
                <el-button type="primary" @click="clearNewData">取消</el-button>
            </div>
        </el-dialog>
        <load-jiao-an :loadJiaoAn="loadJiaoAn" @DialogClose="closeJiaoAn"></load-jiao-an>
        <remove-jiao-an :removeJiaoAn="removeJiaoAn" @DialogClose="closeJiaoAn"></remove-jiao-an>
        <start-handle :startHandle="startHandle" @DialogClose="closeHandle" @showAddJiaoAn="showAddJiaoAn"></start-handle>
        <sys-gong-kuang :sysGongKuang="sysGongKuang" @DialogClose="closeJiaoAn"></sys-gong-kuang>
        <el-dialog ref="operateRecordDialogRef" custom-class="operateRecordDialog" :modal="false" :close-on-click-modal="false" v-if="operationRecordsDialogVisible" :visible.sync="operationRecordsDialogVisible" v-dialogDrag:{dialogDrag}="true" width="35%">
            <p slot="title" class="el-dialog__title">操作记录</p>
            <div class="messageAlarmList">
                <el-table :data="operationRecordsData" width="100%" height="250" >
                    <el-table-column prop="num" label="序号" width="85" header-align="center" align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.num}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间" width="160" header-align="center" align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.createTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="log_desc" label="操作描述" header-align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.log_desc}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import MonitorHeader from "@/components/MonitorHeader/MonitorHeader.vue";
import SysGongKuang from "@/components/JA/sysGongKuang.vue";
import StartHandle from "@/components/JA/startHandle.vue";
import RemoveJiaoAn from "@/components/JA/removeJiaoAn.vue";
import LoadJiaoAn from "@/components/JA/loadJiaoAn.vue";
import { getOperateRecord, saveJAn, submitOperateRecord } from "@/api/api";
import { EventBus } from "@/tools/bus";
import NumScreen from "@/components/controls/numScreen.vue";
import BiLeiQi from "@/components/controls/biLeiQi.vue";
import XianQuan from "@/components/controls/xianquan.vue";
import { wsSend } from "@/tools/sendMessage";
import TerminalSvg from "@/components/controls/terminal-svg.vue";
import ConnectLine from "@/components/controls/connect-line.vue";
import RectSvg from "@/components/controls/rect-svg.vue";
import MainBus from "@/components/controls/mainBus.vue";
import DianLiuHuGanQi from "@/components/controls/dianLiuHuGanQi.vue";
import Jiedi from "@/components/controls/jiedi.vue";
import ShouCheSvg from "@/components/controls/shou-che-svg.vue";
import Zhanyongbian from "@/components/controls/zhanyongbian.vue";
import FourCircle from "@/components/controls/fourCircle.vue";
import DianKangQi from "@/components/controls/dianKangQi.vue";
import TwoCircle from "@/components/controls/twoCricle.vue";
import Dianrongqi from "@/components/controls/dianrongqi.vue";
import TwoTriangle from "@/components/controls/twoTriangle.vue";
import ShouCheSvg1 from "@/components/controls/shou-che-svg1.vue";
import ThreeCircle from "@/components/controls/threeCircle.vue";
import RightClickmenuList from "@/components/rightClickmenuList/rightClickMenuList.vue";
import YaokongDialog from "@/components/rightClickmenuList/yaokongDialog.vue";
import GuapaiDialog from "@/components/rightClickmenuList/guapaiDialog.vue";
import {pageHandler} from "@/mixins/pageHandler";
import Blq from "@/components/controls/blq.vue";


export default {
    name: "mainPage",
    components: {
        Blq,
        GuapaiDialog, YaokongDialog, RightClickmenuList,
        ThreeCircle,
        ShouCheSvg1,
        TwoTriangle,
        Dianrongqi,
        TwoCircle,
        DianKangQi,
        FourCircle,
        Zhanyongbian,
        ShouCheSvg,
        Jiedi,
        DianLiuHuGanQi,
        MainBus,
        RectSvg,
        ConnectLine,
        TerminalSvg,
        XianQuan,
        BiLeiQi,
        NumScreen,
        LoadJiaoAn,
        RemoveJiaoAn,
        StartHandle,
        SysGongKuang,
        MonitorHeader,
        ScaleBox
    },
    mixins: [pageHandler],
    data() {
        return {
            operationRecordsDialogVisible:false,
            operationRecordsData:[],
            jiaoAnValue: [],
            pageData:null,
            jiaoAnOptions_1:[],
            jiaoAnOptions: [{
                value: '生成教案',
                label: '生成教案',

            }, {
                value: '加载教案',
                label: '加载教案',
            },
                {
                    value: '删除教案',
                    label: '删除教案',
                },{
                    value: '录制教案',
                    label: '录制教案',
                    children: [{
                        value: '开始记录操作到教案完全记录',
                        label: '开始记录操作到教案完全记录'
                    }, {
                        value: '结束记录操作到教案完全结束',
                        label: '结束记录操作到教案完全结束'
                    },]
                }],
            form: {
                name: '',
                gKList: [],
                region:'',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            gongkuangValue:[],
            newJiaoAnDialog: false,
            gongKuangOptions: [{
                value: '系统工况',
                label: '系统工况',
            }],
            loadJiaoAn:false,
            //删除教案
            removeJiaoAn:false,
            //
            startHandle:false,
            //工况
            sysGongKuang:false,
        }
    },
    watch: {
        watch: {
            newJiaoAnDialog(val) {
                if (val){
                    this.getGkList();
                }
            }
        }
    },
    created() {
        EventBus.$on('ws-connected', this.handleWSConnected)
        if (this.$store.state.ws && this.$store.state.ws.readyState === WebSocket.OPEN) {
            this.handleWSConnected()
        }
    },
    methods: {
        dangwei(val){
            this.$message.success(val)
        },
        handleWSConnected() {
            if (this.$store.state.wsHandled) return
            this.$store.commit('setWsHandled',true)
            wsSend({ cmd: 'getMonitorMainPage' })
        },
        getOperateRecordList() {
            getOperateRecord({}).then(res => {
                if (res.data){
                    const data = JSON.parse(JSON.stringify(res.data.map(o => {
                        o.isHighlight = false;
                        return o;
                    })));
                    if (this.operationRecordsData.length && this.operationRecordsData.length !== data?.length) {
                        data[0].isHighlight = true;
                    }
                    this.operationRecordsData = data;
                }

            });
        },
        operationRecords() {
            this.operationRecordsDialogVisible = true
            this.operationRecordsData = [];
            this.getOperateRecordList();
            this.$nextTick(() => {
                this.$refs.operateRecordDialogRef.$el.style.pointerEvents = 'none';
            });
        },
        clearAll(){
            wsSend({ "cmd": "switchAllClear" })
            submitOperateRecord({ log_desc: '全站清闪' },false)
        },
        alertLog(){
            wsSend({ "cmd": "openAlertWindow" })
        },
        startDrag(e) {
            e.preventDefault();
            const el = this.$refs.page;
            this.isDragging = true;
            this.startX = e.clientX;
            this.startY = e.clientY;
            this.scrollLeft = el.scrollLeft;
            this.scrollTop = el.scrollTop;

            window.addEventListener("mousemove", this.onDrag);
            window.addEventListener("mouseup", this.stopDrag);
        },
        onDrag(e) {
            if (!this.isDragging) return;
            e.preventDefault();

            const dx = e.clientX - this.startX;
            const dy = e.clientY - this.startY;

            cancelAnimationFrame(this.dragAnimationFrame);

            this.dragAnimationFrame = requestAnimationFrame(() => {
                const el = this.$refs.page;
                if (!el) return;

                el.scrollLeft = this.scrollLeft - dx;
                el.scrollTop = this.scrollTop - dy;
            });
        },
        stopDrag() {
            this.isDragging = false;
            cancelAnimationFrame(this.dragAnimationFrame);
            window.removeEventListener("mousemove", this.onDrag);
            window.removeEventListener("mouseup", this.stopDrag);
        },
        async newJiaoAn(){
            if (this.form.name===''){
                this.$message.error('请输入名称')
                return
            }
            if (this.form.region===''){
                this.$message.error('请选择工况')
                return
            }
            if (this.form.desc===''){
                this.$message.error('请输入描述')
                return
            }
            const params = {
                gkId:this.form.region,
                name: this.form.name,
                teaDesc: this.form.desc,
            }
            const res=await saveJAn(params);
            if (res.data.code===200){
                this.$message.success('添加成功')
                this.clearNewData();
            }else{
                this.$message.error('添加失败请检查网路设置')
            }
        },
        closeJiaoAn(){
            this.gongkuangValue=undefined;
            this.jiaoAnValue=undefined;
            this.loadJiaoAn=false
            this.removeJiaoAn=false
            this.sysGongKuang=false
            this.newTicket=false
        },
        closeHandle(){
            this.gongkuangValue=undefined;
            this.jiaoAnValue=undefined;
            this.startHandle=false
        },
        clearNewData(){
            this.form = {
                name: '',
                gKList: [],
                region:'',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            };
            this.newJiaoAnDialog = false
        },
        showAddJiaoAn(){
            this.newJiaoAnDialog = true
        },
        handleChange(value) {
            if (value){
                this.jiaoAnValue=null
                this.gongkuangValue=null
                const currentSelect = value[value.length - 1]
                switch (currentSelect){
                    case '生成教案':
                        this.newJiaoAnDialog = true
                        break
                    case '加载教案':
                        this.loadJiaoAn = true
                        break
                    case '删除教案':
                        this.removeJiaoAn = true
                        break
                    case '开始记录操作到教案完全记录':
                        this.startHandle = true
                        break
                    case '系统工况':
                        this.sysGongKuang = true
                        break
                }
            }
        },
        messageHandle(data){
            if (data.cmd==='switchAllClear'){
                this.$message.success('全站清闪成功')
                wsSend({ "cmd": "getMonitorMainPage" })
            }
            if (data.cmd==='getMonitorMainPage'){
                this.pageData = JSON.parse(JSON.stringify(data.data))
                console.log(JSON.parse(JSON.stringify(this.pageData)),'主图数据')
            }
        },
    },
    mounted() {
        if(['teacher','admin'].includes(this.$store.state.user?.userRole)){
            this.jiaoAnOptions_1=JSON.parse(JSON.stringify(this.jiaoAnOptions))
        }else{
            this.jiaoAnOptions_1=this.jiaoAnOptions.filter(o=>o.value==='加载教案')
        }
        EventBus.$on("ws-message",this.messageHandle)
        this.$store.commit('setMainPage',true)
    },
    beforeCreate() {
        this.$store.commit('setWsHandled',false)
    },
    beforeDestroy() {
        EventBus.$off("ws-message",this.messageHandle)
        EventBus.$off('ws-connected')
        this.$store.commit('setMainPage',false)
    },
};
</script>
